<div style="width: 94%; margin: 3%;">
  <ul data-role="listview" data-mini="true" data-inset="true" class="float_left">
    <li data-role="list-divider" role="heading">
      Amigos
    </li>
    <% for person in @people %>
      <li>
        <div style="display: inline;">
          <%= image_tag person.image, :style => "max-width:30px;margin:0;padding:0;border-radius:5px;" %>
        </div>
        <strong>@<%= person.screen_name %></strong>
        <select data-role="slider" data-mini="true" class="slider friendsToggleSlider" data-person_id="<%= person.id %>">
          <option value="no"></option>
          <option value="yes" <%= current_user.friends.include?(person) ? "selected='selected'" : "" %> ></option>
        </select>
      </li>
    <% end -%>
  </ul>

  <ul data-role="listview" data-mini="true" data-inset="true" class="float_left" style="margin: 1em 0 0 0;">
    <li data-role="list-divider" role="heading">Mi posición</li>
    <li>
      Mantener centrado
      <select data-role="slider" data-mini="true" class="slider" id="slider_panToActualPosition">
        <option value="no"></option>
        <option value="yes" selected="selected"></option>
      </select>
    </li>
  </ul>
  <div class="small align_center" style="margin: 0 0 1em 0;">
    Desplaza el mapa de manera que se mantenga centrado en tu posición a medida que te mueves
  </div>

  <a href="/logout" data-role="button" data-mini="true" data-icon="delete" rel="external" data-theme="a">Cerrar sesión</a>

  <div class="small align_center" style="margin: 2em;">
    Esta aplicación fue escrita por <a href="http://macool.me">@macool</a>. Es software libre. Tiene una licencia GNU GPL v3. Su código fuente se puede encontrar en <a href="http://code.google.com/p/encontrar-amigos/">http://code.google.com/p/encontrar-amigos/</a>
  </div>
  
</div>
<%= javascript_tag "$('.slider').slider({ mini: true })" %>